<template>
  <el-card class="table-card">
    <div slot="header">
      <h4>{{title}}</h4>
    </div>
    <el-row>
      <SkusTable
        :showActionCol="false"
        :columns="tableInfo.columns"
        :loading="tableInfo.loading"
        :dataSource="tableInfo.list"
      />
    </el-row>
  </el-card>
</template>
<script>
import SkusTable from '@/components/skusTable'
import {
  STEEL_VIEW_TABLE_CLOUMNS,
  SUPPLIER_VIEW_TABLE_CLOUMNS
} from './constants'
import {
  queryStandardDetailByRecordService
} from '@/api/sourcing/factoryStandard'

export default {
  components: {
    SkusTable,
  },
  data () {
    return {
      tableInfo: {
        loading: false,
        list: [],
        columns: STEEL_VIEW_TABLE_CLOUMNS
      },
    };
  },
  computed: {
    title () {
      const {
        recordType
      } = this.$route.query
      return recordType == 2 ? '查看供应商厂直标准详情' : '查看钢材厂直标准详情'
    }
  },
  mounted () {
    this.initTableData();
  },
  methods: {
    // 初始化表格数据
    initTableData () {
      const {
        auditRecordId,
        recordType // 单据类型 2 供应商 3 钢材
      } = this.$route.query
      if (recordType == 2) {
        this.tableInfo.columns = SUPPLIER_VIEW_TABLE_CLOUMNS
      } else if (recordType == 3) {
        this.tableInfo.columns = STEEL_VIEW_TABLE_CLOUMNS
      }
      if (auditRecordId) {
        this.getTableDataByRecordId(auditRecordId)
      }
    },
    // 获取表格数据通过单据号
    async getTableDataByRecordId (auditRecordId) {
      const res = await queryStandardDetailByRecordService(
        { auditRecordId },
        state => { this.tableInfo.loading = state }
      )
      if (res?.data) {
        this.tableInfo.list = res.data || []
      }
    },
  }
};
</script>
